<script lang="ts">
const Link_button = document.querySelectorAll("#Link_button");

Link_button.forEach((v) => {
  // @ts-expect-error
  v.addEventListener(
    "click",
    function ({ clientX, clientY, target: { offsetLeft, offsetTop } }) {
      let x = clientX - offsetLeft;
      let y = clientY - offsetTop;

      let ripples = document.createElement("span");
      ripples.style.left = `${x}px`;
      ripples.style.top = `${y}px`;
      this.appendChild(ripples);

      setTimeout(() => {
        ripples.remove();
      }, 800);
    }
  );
});
</script>

<div class="flex gap-[10px m-[10px]">
  <a
    id="Link_button"
    class="relative rounded-[2rem] border-[1px] border-solid border-white box-border decoration-white inline-block mx-[.6rem] my-[.5rem] px-[2rem] py-[.75em] no-underline font-thin overflow-hidden bg-transparent duration-150 hover:drop-shadow-[0px_0px_8px_rgb(255,255,255)]"
    href="https://www.mcmod.cn/class/6114.html"
    target="_blank"
    style="will-change: filter;">下载MOD</a
  >
  <a
    id="Link_button"
    class="relative rounded-[2rem] border-[1px] border-solid border-white box-border decoration-white inline-block mx-[.6rem] my-[.5rem] px-[2rem] py-[.75em] no-underline font-thin overflow-hidden bg-transparent duration-150 hover:drop-shadow-[0px_0px_8px_rgb(255,255,255)]"
    href="/wiki"
    target="_blank"
    style="will-change: filter;">进入Wiki</a
  >
</div>
<!-- button.button button:global(span) keyframe wave没做，不知道用在哪的-->
